<template>
	<div style="width: 100%; ">
	<view class="content"  >
		<image class="logo" src="/static///not_login.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
		<form class="login-form" @submit="formSubmit">
			<view style="margin-top: 10px;">账号</view>
		<view class="username">
			<input name="userid" placeholder="请输入账号"  type="username" value="123456"/>
		</view>
		<view class="text_line"></view>
		<view style="margin-top: 10px;">密码</view>
		<view class="password">
			<input name="password" placeholder="请输入密码"  type="password" value="123456"/>
		</view>
		<view class="text_line">	</view>
		<el-container style="margin-top: 10px;">
			<template>
			  <el-radio-group v-model="FormData.role">
			    <el-radio label="1">用户</el-radio>
			    <el-radio label="2">商家</el-radio>
			  </el-radio-group>
			</template>
		</el-container>
		<view class="login_button">
		<button form-type="submit" class="is-hover" >登录</button>
		</view>
		<view style="font-size: 15px; margin:10px; color:skyblue"  @click="register">还未拥有账号？点击注册</view>
		</form>
	</view>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				title: '登录',
				FormData: {
						"createtime": "",
						"gender": 0,
						"id": 0,
						"password": "",
						"photo": "",
						"tele": "",
						"userid": "",
						"username": "",
						"role":'',
				}
			}
		},
		methods: {
			// 这是一个注释
			formSubmit(formData){
				uni.showLoading({
					title:'登录中...',
					mask:true	
				})
				
				//调用其他组件时form表单要自己去添加
				formData.preventDefault();
				const newFormData = formData.detail.value;
				newFormData.role = this.FormData.role;

				let new_url='';
					if (newFormData.role == 1) {
					  // new_url='http://192.168.2.226:8086:8086/business/user/login';
					  new_url='http://192.168.2.226:8086/business/user/login';
					} 
					else if (newFormData.role ==2) { 
					  // new_url='http://192.168.2.226:8086:8086/business/seller/login';
					  new_url='http://192.168.2.226:8086/business/seller/login';
					}
					console.log(new_url);
				if (!new_url)
				uni.showToast({
					title:"请选择你的登陆状态",
					duration:2000,
					icon:'error'
				});	
				else
				uni.request({
					url:new_url,
					method:'POST',
					data:formData.detail.value,
					// 返回成功的结果
					success(res){
					console.log(res.data);
					let icon = 'none'; 
				if (res.data.code === 1) { 
				  icon = 'success';
				} else if (res.data.code === 0) { 
				  icon = 'error';
				}
					uni.hideLoading()
					uni.showToast({
						title:res.data.msg,
						duration:2000,
						icon:icon
					})	
							
						// 同步存储账号信息和权限
						uni.setStorageSync('login-user',res.data.data);
						uni.setStorageSync('login-role',newFormData.role);
						var abc=uni.getStorageSync('user-token').token;
						console.log(JSON.stringify(abc));

					if (res.data.code == 1 ) {
						uni.redirectTo({
							url:'/pages/index/mine'
						})
						}
									
					},
					fail() {
						uni.hideLoading()
					},
				})
			},
			
			register() {
				this.$router.push('/pages/register/Register')
			}
		},
	
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 50px;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
		
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: brown;
		margin-left: 20rpx;
	}
	.label{
		font-size:20px ;
		margin-left: 0;
	}
	
	.login_button{
		margin-top: 30rpx;
		width: 60vw;
		margin-left: 20px;

	}
	.register_button{
		margin-top: 40rpx;
		
	}
	.login-form{
		margin-top: 100rpx;
		width: 90vw;
		padding: 0 10vw;
		box-sizing: border-box;
	 /* 用于添加阴影效果 */
		box-shadow: 0 0 8rpx 6rpx rgba(255, 128, 80, 0.3);
		border-radius: 20rpx;
		
	}
	
	
	.login-form .username  input{
		margin-top: 20px;
		box-shadow: 0 0 8rpx 6rpx rgba(0, 0, 0, 0.2);
		height: 80rpx;
		border-radius: 10rpx;
		border-bottom:1px solid #87ceeb;
		

		
	}
	.login-form .password  input{
		margin-top: 15px;
		height: 80rpx;
		border-radius: 10rpx;
		box-shadow: 0 0 8rpx 6rpx rgba(0, 0, 0, 0.2);
		border-bottom:1px solid #87ceeb
	}
	.is-hover {
		color: white;
		background-color: #179b16;
	  }
	  .text_line{ 
		  
		/*盒子下边距，这里用来指定下划线距离文字的高度*/
		padding-bottom: 15px;
		
		/*设定一个2px，实线*/
	    border-bottom: 2px solid #228B22; 
	  }
	  .redio_color{
		  accent-color: rgb(78, 151, 48, 5);
		
	  }
</style>
